<?php
include 'logic_layer.php';

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "cfq2") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Questionnaire - 1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Questionnaire -->
        <link href="questionnaire.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps ">
                    <p class="steps-done">Welcome &#10140; Choose Scenario &#10140; Describe Experience &#10140;</p>
                    <p class="step-current">Questionnaires</p>
                    <p class="steps-pending"></p>
                </div>
            </div>
        </div>

        <!-- Part 1: Wrap all page content here -->
        <!-- Begin page content -->
        <div class="container">
            <div class="page-header">
                <h1>Questionnaires - 1</h1>
            </div>

            <form class="form-horizontal" role="form" action='index.php' method='post' name='frm' id='frm'>
                <p class="qsectiontitle">Please think of the experience you described and answer the following questions.</p>

                <script>
                    var shuffle = function (array) {
                        var currentIndex = array.length, temporaryValue, randomIndex;

                        // While there remain elements to shuffle...
                        while (0 !== currentIndex) {

                            // Pick a remaining element...
                            randomIndex = Math.floor(Math.random() * currentIndex);
                            currentIndex -= 1;

                            // And swap it with the current element.
                            temporaryValue = array[currentIndex];
                            array[currentIndex] = array[randomIndex];
                            array[randomIndex] = temporaryValue;
                        }

                        return array;
                    }

                    var questions = [
                        "1 I think about how much worse things could have been.",
                        "2 I feel relieved when I think about how much worse things could have been.",
                        "3 I count my blessings when I think about how much worse things could have been.",
                        "4 Although what happened was negative, it clearly could have been a lot worse.",
                        "5 If only another person (or other people) had not been so selfish, this whole mess could have been avoided.",
                        "6 If another person (or other people) had not been so inconsiderate, things would have been better.",
                        "7 If only other people (or another person) would have acted differently, this situation would have never happened.",
                        "8 If only another person (or other people) had spoken up at the time, the situation would have turned out better.",
                        "9 I think about how much better things would have been if I had acted differently.",
                        "10 I wish I had a time machine so I could just take back something I said or did.",
                        "11 If only I had listened to my friends and/or family, things would have turned out better.",
                        "12 I think about how much better things could have been if I had not failed to take action.",
                        "13 I feel sad when I think about how much better things could have been.",
                        "14 I think about how much better things could have been.",
                        "15 Although the bad situation was nobody’s fault, I think about how things could have turned out better.",
                        "16 I cannot stop thinking about how I wish things would have turned out.",
                        "17 Do not answer this, if you are reading the questions."
                    ]

                    shuffle(questions);

                    for (var i = 0; i < questions.length; i++) {
                        var questionStr = questions[i].substr(questions[i].indexOf(" ") + 1);
                        var questionNumber = parseInt(questions[i].substr(0, questions[i].indexOf(" ")));

                        if (questionNumber == 17) {
                            document.write('<div class="question" id="q' + questionNumber + '">');
                        } else {
                            document.write('<div class="question compulsory" id="q' + questionNumber + '">');
                        }

                        document.write('<p>' + questionStr + '</p>');
                        document.write('<div class="scale-rate">');
                        document.write('<label for="inputQ' + questionNumber + '">Not at all true</label>');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="1" title="1">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="2" title="2">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="3" title="3">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="4" title="4">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="5" title="5">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="6" title="6">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="7" title="7">');
                        document.write('<label for="inputQ' + questionNumber + '">Very true</label>');
                        document.write('</div></div>');
                    }

                </script>
                <!-- --------- -->
                <input type="hidden" value="cfq3" name="step" />
            </form>
            <hr>

            <div id="unanswered" class="alert alert-error">
                Please answer all of the questions.
            </div>

            <br>
            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>
            <br>
            <br>

        </div>


        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>
                var highlightUnanswered = function () {
                    //scale rate and checkbox and multiple choices
                    $('.question input[name*="inputQ"]').each(function () {
                        var input = $(this);
                        var name = input.attr("name");
                        //reset background color
                        if (input.parent().parent().attr("class").indexOf("compulsory") > -1) {
                            input.parent().parent().attr("class", "question compulsory");
                        } else {
                            input.parent().parent().attr("class", "question");
                        }

                        if (!$("input[name='" + name + "']:checked").val()) {
                            if (input.parent().parent().attr("class").indexOf("compulsory") > -1) {
                                input.parent().parent().attr("class", "question compulsory alert-error");
                            } else {
                                input.parent().parent().attr("class", "question alert-error");
                            }
                        }

                    });
                }

                var submitForm = function () {
                    //add questions inputs
                    $('.question').each(function () {
                        //question                
                        var question = $(this).children(':first-child').html();
                        $('#frm').append('<input type="hidden" name="question_' + $(this).attr("id") + '" value="' + question + '" />');
                        //question type
                        var questionType = $(this).children(':first-child').next().attr('class');
                        $('#frm').append('<input type="hidden" name="question_type_' + $(this).attr("id") + '" value="' + questionType + '" />');
                    });
                    //submit form
                    $('#frm').submit();
                }

                var continueStudy = function () {
                    $('#unanswered').hide();
                    var fieldEmpty = false;
                    //scale rate and checkbox and multiple choices
                    $('.compulsory input[name*="inputQ"]').each(function () {
                        var input = $(this);
                        var name = input.attr("name");
                        if (!$("input[name='" + name + "']:checked").val()) {
                            fieldEmpty = true;
                            console.log(name)
                        }

                    });
                    //check if any compulosy field is empty
                    if (fieldEmpty) {
                        highlightUnanswered();
                        $('#unanswered').show();
                    } else {
                        // go to the next step
                        submitForm();
                    }
                }

                $('#unanswered').hide();
        </script>
    </body>
</html>
